/**************pocketPart***************/
.wrapper .main .pocketPart{
    width: 100%;
    height: 270vw;
    background-color: #1f2837;
    color: #ffffff;
    position: relative;
    user-select: none;
}

/**************pocket-title***************/
.wrapper .main .pocketPart .pocket-title{
    width: 100%;
    height: 30vw;
    background-color: #293d58;
    font-size: 7vw;
    font-weight: lighter;
    box-shadow: inset 0 -1vw 1vw #1f2837; /*盒子下边缘模糊处理，模糊半径1vw*/
}
.wrapper .main .pocketPart .pocket-title p{
    padding-top: 12vw;
    padding-left: 2vw;
}
.wrapper .main .pocketPart .explain{
    padding-top: 5vw;
    padding-left: 2vw;
}
.wrapper .main .pocketPart .explain h4{
    font-weight: normal;
}
.wrapper .main .pocketPart .explain p{
    color: #9099a2;
    font-size: 3.7vw;
    margin-top: 3vw;
}

/**************info***************/
.wrapper .main .pocketPart .info{
    margin-top: 9vw;
}
.wrapper .main .pocketPart .info h4{
    font-size: 5vw;
    font-weight: lighter;
    margin-left: 2vw;
}
.wrapper .main .pocketPart .info .info-box{
    width: 98%;
    height: 40vw;
    background-color: #182026;
    margin-left: 1vw;
    margin-top: 2vw;
    color: #8abae0;
    font-size: 3.5vw;
}
.wrapper .main .pocketPart .info .info-box .info-title{
    height: 40%;
    width: 90%;
    margin-left: 3vw;

    display: flex;
    justify-content: space-between;

}
.wrapper .main .pocketPart .info .info-box .info-title p{
    margin-top: 7vw;
}
.wrapper .main .pocketPart .info .info-box .info-title p:last-child{
    font-size: 7vw;
    margin-top: 5vw;
}
.wrapper .main .pocketPart .info .info-box .option{
    height: 17%;
    width: 90%;
    background-color: #233040;
    margin-left: 3vw;
    margin-bottom: 2vw;
    padding-left: 2vw;
    padding-top: 1vw;
    cursor: pointer;
}

/**************setting***************/
.wrapper .main .pocketPart .setting{
    display: flex;
    position: absolute;
    right: 0;
    margin-top: 3vw;
    padding-right: 2vw;
    box-sizing: border-box;
}
.wrapper .main .pocketPart .setting div{
    font-size: 3vw;
    color: #9099a2;
}
.wrapper .main .pocketPart .setting select{
    background-color: #233040;
    outline: none;
    border: none;
    color: #8abae0;
    height: 4vw;
    width: 19vw;
}

/**************recharge-list***************/
.wrapper .main .pocketPart .recharge-list{
    width: 95%;
    margin-left: 2vw;
    margin-top: 4vw;
    padding-top: 2vw;
}
.wrapper .main .pocketPart .recharge-list li{
    width: 98%;
    height: 20vw;
    margin-top: 4vw;
    margin-left: 1vw;
    margin-bottom: 4vw;
    background: linear-gradient(to right, #303c48, #596573);
    border-radius: 3px;
    box-sizing: border-box;
    padding-top: 2vw;

    display: flex;
    justify-content: space-evenly;
}
.wrapper .main .pocketPart .recharge-list li .item-content{
    width: 55%;
}
.wrapper .main .pocketPart .recharge-list li .item-content p{
    font-size: 4.5vw;
    margin: 2vw 0 0 2vw;
}
.wrapper .main .pocketPart .recharge-list li .item-content .explain{
    color: #c9d3dd;
    font-size: 3vw;
    margin-top: -3vw;
    margin-left: -0.2vw;
}
.wrapper .main .pocketPart .recharge-list li .recharge{
    width: 35%;
    height: 9vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    background-color: #000000;
    margin-right: 3vw;
    margin-top: 3vw;
    border-radius: 3px;
}
.wrapper .main .pocketPart .recharge-list li .recharge .price{
    width: 52%;
    font-size: 3.5vw;
    color: #c9d3dd;

    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .main .pocketPart .recharge-list li .recharge div:last-child{
    width: 40%;
    height: 83%;
    background: linear-gradient(to bottom, #80972f, #5b6c1e);
    font-size: 4vw;
    color: #d5e791;
    border-radius: 4px;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

/**************end-explain***************/
.wrapper .main .pocketPart .end-explain{
    margin-top: 6vw;
    margin-left: 2vw;
    font-size: 3.7vw;

    display: flex;
    align-items: center;
}
.wrapper .main .pocketPart .end-explain p:first-child{
    color: #9099a0;
}
.wrapper .main .pocketPart .end-explain p:last-child {
    cursor: pointer;
}
/**************footer***************/
.wrapper .footer .shop{
    color: #4b9cf7;
}